<template>
	<view class="warp">
		<view class="list">
			<uni-collapse accordion @change="change">
				<uni-collapse-item titleBorder="auto" v-for="(item,index) in list" :key="index">
					<template v-slot:title>
						<view class="title" style="display: flex;justify-content: space-between;padding: 30rpx 20rpx;">
							 <view class="name">
							 {{item.storeName}}
							 </view>
							 <view class="num">
							 	{{item.browNums}}
							 </view>
						</view>
						 
					</template>
					<view class="content">
						<view class="citem" v-for="(items,index) in clist" :key="index" style="display: flex;justify-content: space-between;padding: 20rpx 40rpx;border-top: 2rpx solid #cecece; color: #c5c5c5;">
							<view class="c_left">
								{{items.username}}
							</view>
							<view class="c_right">
								{{items.userCustomerNum}}
							</view>
						</view>
					</view>
				</uni-collapse-item>
			<!-- 	<uni-collapse-item title="手风琴效果">
						<text>折叠内容</text>
				</uni-collapse-item> -->
				
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import uniCollapse  from "../uni-collapse/uni-collapse.vue"
	import uniCollapseItem from "../uni-collapse-item/uni-collapse-item.vue"
	import {mapState,mapMutations} from 'vuex'
	export default {
		components:{
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				num:100,
				id:null,
				list:[],
				clist:[],
				queryform:{
					pageSize:20,
					current:1,
					activityId:''
				},
				total:0,
			};
		},
		computed: {
					...mapState(['hasLogin', 'userInfo', 'userCenterData']),
					},
		onLoad(e) {
			this.id=e.id
			this.getactivity(e)
		},
		// 下拉
			onPullDownRefresh() {
				// 刷新位置
			this.getactivity({id:this.is})
				var that=this
				setTimeout(function(){
						uni.stopPullDownRefresh()
					},1000)
			},
			onReachBottom(){
				if(this.queryform.pageSize*this.queryform.current>this.total){
					uni.showToast({
						title:"数据加载完毕",
						icon:'none'
					})
				}else{
					this.queryform.current++
					this.$request({
						url:'v3/activity/front/activity/list',
						method:'GET',
						data:this.queryform
					}).then(res=>{
						this.list.push(...res.data.list)
						
					})
				}
			},
		methods:{
			getactivity(val){
				this.queryform.activityId=val.id
				this.$request({
					url:"v3/activity/front/activity/list",
					method:"GET",
					data:this.queryform
				}).then(res=>{
					this.list=res.data.list[0].sellerCustomerInfoList
                    this.total=res.data.pagination.total
				})
			},
			change(e){
				console.log(e);
				this.clist=[]
				this.getmember(e)
			},
			// 获取员工数据
			getmember(val){
				console.log(val);
				this.$request({
					url:'v3/activity/front/activity/member/customer/nums',
					method:'GET',
					data:{
						activityId:this.id,
						memberId:this.list[val].userId
					}
				}).then(res=>{
					if(res.data.length==0){
						uni.showToast({
							title:"暂无员工数据",
							icon:'none'
						})
					}else{
						this.clist=res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
			width: 750rpx;
			margin: 0 auto;
			background: #F5F5F5;
		}
.warp{
	overflow: hidden;
	.list{
		margin-top: 20rpx;
		background-color: #fff;
	}
}
</style>
